<template>
  <view>
    <my-search @click='to_search' ></my-search>
    <view class=" scroll_box">
      <scroll-view scroll-y="true" class="goods_type" :style="{height:winHeight+'px'}">
        <view :class="{'hightLight':hightLight==i}"  v-for="(item,i) in goodsInfo" :key='item.cat_id' >
         <view  @click="changeHight(i)">
            {{item.cat_name}}
         </view>
        </view>
      </scroll-view>
      <scroll-view scroll-y="true" :scroll-top="scrollTop" class="goods_desc" :style="{height:winHeight+'px'}">
      <block v-for="(item,i) in childGoodsInfo" :key='i'>
        <view class="goods_title" >
         / {{item.cat_name}} /
        </view>
        <view class="children_three_box" >
            <view class="children_three_image" @click="to_detail(item2.cat_pid)" v-for="(item2,i2) in item.children" :key='i2'>
              <image :src="item2.cat_icon" mode="widthFix"></image>
                <text>{{item2.cat_name}}</text>
            </view>
          
        </view>
      </block>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import badgeMix from '@/mixins/tabbar-badge.js'
  export default {
       mixins:[badgeMix],
    data() {
      return {
        winHeight:'',
        goodsInfo:[],
        hightLight:0,
        childGoodsInfo:[],
        scrollTop:''
      };
    },
    onLoad(){
     const sysInfo= uni.getSystemInfoSync()
     this.winHeight=sysInfo.windowHeight-30
     this.getGoodsInfo()
    },
    methods:{
     async getGoodsInfo(){
        const {data:res}=await uni.$http.get('/api/public/v1/categories')
        if(res.meta.status!=200) uni.$showMsg('请求数据失败！')
        uni.$showMsg('请求数据成功！')
        this.goodsInfo=res.message
        console.log(res.message)
        this.childGoodsInfo=res.message[this.hightLight].children
      },
      changeHight(i){
        this.hightLight=i
        this.childGoodsInfo=this.goodsInfo[i].children
        this.scrollTop=this.scrollTop==0?1:0
      },
      to_search(){
        uni.navigateTo({
          url:'/subpkg/search/search'
        })
      },
      to_detail(ids){
       uni.navigateTo({
         url:'/subpkg/goods_detail/goods_detail?goodsId='+ids
       })
      }
    }
  }
</script>

<style lang="scss">
.goods_type{
 width: 240rpx;
 font-size: 35rpx;
  background-color: #f7f7f7;
  view{
   padding: 30rpx 0;
    color: black;
    text-align: center;
  }
}
.hightLight{
  background-color: #ffff;
  position: relative;
 &::before{
   content: '';
   display: block;
   width: 3px;
   height: 30px;
   background-color: #c00000;
   position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
 }
}
.scroll_box{
  display: flex;
}
.goods_title{
  height: 100rpx;
  font-weight: bold;
  text-align: center;

}
.children_three_box{
  // background-color: green;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  // justify-content: start;
  .children_three_image{
    display: flex;
    flex-direction: column;
    justify-content: center;
    // align-items: center;
    text{
      text-align: center;
      font-size: 12px;
      padding-left: 40rpx;
    }
  }
  image{
    width: 140rpx;
    height: 240rpx;
    margin-left: 40rpx;
  }
}
</style>
